<template>
  <div class="layout-container">
    <!-- 顶部 -->
    <div class="header">
      <div style="width: 400px; display: flex">
        <img src="@/assets/course.svg" style="width: 50px;margin-left: 15px; margin-right: 20px"/>
        <span style="color: white; display: flex; align-items: center; font-size: 22px">课程管理系统</span>
      </div>
      <div style="flex: 1"></div>
      <div style="display: flex; align-items: center; margin-right: 60px">
        <img src="../../assets/admin.jpg" style="width: 45px; border-radius: 50%">
        <div style="color: white; margin-left: 10px; font-size: 16px">{{ data.admin.name }}</div>
        <el-dropdown trigger="click">
          <el-icon style="margin-left: 5px; color: white;"><ArrowDown /></el-icon>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item @click="handleLoginOut">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>
    <div class="main-content">
      <!-- 侧边栏 -->
      <div class="sidebar">
        <el-menu
            router
            :default-active="router.currentRoute.value.path"
            style="background-color: #324157;"
            text-color="white"
            >
          <el-menu-item
              v-for="menu in accessibleMenus"
              :key="menu.index"
              :index="menu.index"
          >
            <el-icon>
              <component :is="menu.icon" />
            </el-icon>
            {{ menu.title }}
          </el-menu-item>
        </el-menu>
      </div>
      <!-- 内容 -->
      <div class="content-area">
        <RouterView />
      </div>
    </div>
  </div>
</template>

<script setup>
import router from "@/router/index.js";
import {
  House, DataAnalysis, Edit, EditPen,
  UserFilled, Avatar, Memo, Finished, CollectionTag
} from "@element-plus/icons-vue";
import {computed, reactive} from "vue";

const allMenus = [
  { index: "/admin/home", title: "管理员首页", icon: House, permission: 0 }, // 首页默认都有权限
  { index: "/admin/dept", title: "学院管理", icon: DataAnalysis, permission: 1 },
  { index: "/admin/major", title: "专业管理", icon: Edit, permission: 2 },
  { index: "/admin/class", title: "班级管理", icon: EditPen, permission: 4 },
  { index: "/admin/student", title: "学生管理", icon: UserFilled, permission: 8 },
  { index: "/admin/teacher", title: "教师管理", icon: Avatar, permission: 16 },
  { index: "/admin/course", title: "课程管理", icon: Memo, permission: 32 },
  { index: "/admin/student-course", title: "选课修改", icon: Finished, permission: 64 },
  { index: "/admin/info", title: "管理员管理", icon: CollectionTag, permission: 128 }
];

const data = reactive({
  admin: JSON.parse(localStorage.getItem("admin")),
});

// 计算可访问的菜单
const accessibleMenus = computed(() => {
  return allMenus.filter(menu => {
    // 首页始终显示，其他菜单根据权限显示
    return menu.permission === 0 || (data.admin.privilege & menu.permission);
  });
});

const handleLoginOut = () => {
  localStorage.clear();
  router.push("/login");
}
</script>

<style scoped>

.layout-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden; /* 防止外部滚动条 */
}

.header {
  background-color: #324157;
  display: flex;
  height: 70px;
  flex-shrink: 0; /* 防止头部被压缩 */
}

.main-content {
  display: flex;
  flex: 1;
  overflow: hidden; /* 防止内部滚动条 */
}

.sidebar {
  width: 150px;
  background-color: #324157;
  overflow-y: auto; /* 如果需要侧边栏滚动 */
}

.content-area {
  flex: 1;
  background-color: #F0F0F0;
  padding: 10px;
  overflow-y: auto; /* 允许内容区域滚动 */
  overflow: hidden; /* 防止内部滚动条 */
}

.el-menu .is-active {
  background-color: #283446;
}

.el-menu :hover {
  background-color: #283446;
}
</style>